<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Alert 警告提示</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
</head>
<style>
.aut_alert .ant-alert-icon{
	width: 1em;
	height: 1em;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法，适用于简短的警告提示。</p>
	<a-alert message="Success Text" type="success"></a-alert>
	
	<a-divider class="a-divi" orientation="left">可关闭的警告提示</a-divider><!-- =============================================================== -->
	<p class="desc">显示关闭按钮，点击可关闭警告提示。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning Text" type="warning" closable @close="onClose"></a-alert>
		<a-alert message="Error Text" type="error" closable @close="onClose"
			description="Error Description Error Description Error Description Error Description Error Description Error Description"></a-alert>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">图标</a-divider><!-- =============================================================== -->
	<p class="desc">可口的图标让信息类型更加醒目。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="Success Tips" type="success" show-icon></a-alert>
		<a-alert message="Informational Notes" type="info" show-icon></a-alert>
		<a-alert message="Warning" type="warning" show-icon></a-alert>
		<a-alert message="Error" type="error" show-icon></a-alert>
		<a-alert message="Success Tips" description="Detailed description and advices about successful copywriting." type="success" show-icon></a-alert>
		<a-alert message="Informational Notes" description="Additional description and informations about copywriting." type="info" show-icon></a-alert>
		<a-alert message="Warning" description="This is a warning notice about copywriting." type="warning" show-icon></a-alert>
		<a-alert message="Error" description="This is an error message about copywriting." type="error" show-icon></a-alert>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">顶部公告</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法，适用于简短的警告提示。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="Warning text" banner></a-alert>
		<a-alert message="Very long warning text warning text text text text text text text" banner closable></a-alert>
		<a-alert :show-icon="false" message="Warning text without icon" banner></a-alert>
		<a-alert type="error" message="Error text" banner></a-alert>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">平滑地卸载</a-divider><!-- =============================================================== -->
	<p class="desc">平滑、自然的卸载提示。</p>
	<a-alert v-if="visible" message="Alert Message Text" type="success" closable :after-close="handleClose"></a-alert>
	
	<a-divider class="a-divi" orientation="left">四种样式</a-divider><!-- =============================================================== -->
	<p class="desc">共有四种样式 success、info、warning、error。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="Success Text" type="success"></a-alert>
		<a-alert message="Info Text" type="info"></a-alert>
		<a-alert message="Warning Text" type="warning"></a-alert>
		<a-alert message="Error Text" type="error"></a-alert>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">含有辅助性文字介绍</a-divider><!-- =============================================================== -->
	<p class="desc">含有辅助性文字介绍的警告提示。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="Success Text" type="success">
			<template #description>
				<p>Success Description <span style="color: red">Success</span> Description Success Description</p>
			</template>
		</a-alert>
		<a-alert message="Info Text" description="Info Description Info Description Info Description Info Description" type="info"></a-alert>
		<a-alert message="Warning Text" description="Warning Description Warning Description Warning Description Warning Description" type="warning"></a-alert>
		<a-alert message="Error Text" description="Error Description Error Description Error Description Error Description" type="error"></a-alert>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义关闭</a-divider><!-- =============================================================== -->
	<p class="desc">自定义图标让信息类型更加醒目。</p>
	<a-alert message="Info Text" type="info" close-text="Close Now"></a-alert>
	<a-alert message="warning Text" type="warning">
		<template #close-text>
			关闭（两个单词的插槽，就不能用了）
		</template>
	</a-alert>
	
	<a-divider class="a-divi" orientation="left">自定义图标</a-divider><!-- =============================================================== -->
	<p class="desc">可以自定义关闭，自定义的文字会替换原先的关闭 Icon。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="showIcon = false" type="success">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Success Tips" type="success" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Informational Notes" type="info" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Warning" type="warning" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Error" type="error" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Success Tips" description="Detailed description and advices about successful copywriting." type="success" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Informational Notes" description="Additional description and informations about copywriting." type="info" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Warning" description="This is a warning notice about copywriting." type="warning" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
		<a-alert message="Error" description="This is an error message about copywriting." type="error" show-icon class="aut_alert">
			<template #icon><chat-dot-round></chat-dot-round></template>
		</a-alert>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">操作</a-divider><!-- =============================================================== -->
	<p class="desc">可以在右上角自定义操作项。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-alert message="Success Tips" type="success" show-icon closable>
			<template #action>
				<a-button size="small" type="text">UNDO</a-button>
			</template>
		</a-alert>
		<a-alert message="Error Text" show-icon description="Error Description Error Description Error Description Error Description" type="error">
			<template #action>
				<a-button size="small" danger>Detail</a-button>
			</template>
		</a-alert>
		<a-alert message="Warning Text" type="warning" closable>
			<template #action>
				<a-space>
					<a-button size="small" type="ghost">Done</a-button>
				</a-space>
			</template>
		</a-alert>
		<a-alert message="Info Text" description="Info Description Info Description Info Description Info Description" type="info" closable>
			<template #action>
				<a-space direction="vertical">
					<a-button size="small" type="primary">Accept</a-button>
					<a-button size="small" danger type="ghost">Decline</a-button>
				</a-space>
			</template>
		</a-alert>
	</a-space>
	
	
	
	
	
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		visible: true,
		
	}
},
methods:{
	onClose(e){
		console.log(e, '我关闭了。');
	},
	handleClose(){
		this.visible = false;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
